<template>
  <div class="mainWarp">
    <Navbar :title="title"></Navbar>

    <van-row>
      <van-sticky :offset-top="46">
        <van-col span="5">
          <van-sidebar v-model="active" @change="onChange">
            <!-- <van-sidebar-item title="为你推荐" /> -->
            <van-sidebar-item v-for="item in typeList" :key="item.id" :title="item.name" />
          </van-sidebar>
        </van-col>
      </van-sticky>

      <van-col span="19">
        <h2 style="padding: 10px;">{{ tname }}</h2>

        <van-grid :border="false" :column-num="2" :gutter="5" v-if="tflag">
          <van-grid-item v-for="(item, index) in products" :key="item.id"
            :to="{ path: '/product/base/detail', query: { id: item.id } }">
            <van-image :src="item.cover_cdn" />
            <span>{{ item.name }}</span>
          </van-grid-item>
        </van-grid>

        <van-empty v-else image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
          :description="tips" />

      </van-col>
    </van-row>
    <Footer></Footer>
  </div>
</template>

<script>
import Navbar from "../Navbar.vue";
import Footer from "../Footer.vue";
export default {
  name: "ProductBase",
  data() {
    return {
      active: 0,
      title: "商品分类",
      typeList: [],
      products: [],
      tname: '为你推荐',
      tflag: true,
      tips: '',
    };
  },
  created() {
    this.typeList.push({ id: 0, name: '为你推荐' });
    this.initType();
    this.initProducts();
  },
  methods: {
    async initType() {
      let res = await this.$api.initType();

      if (res.code === 1) {
        this.typeList = this.typeList.concat(res.data);
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    },
    async initProducts() {
      let res = await this.$api.initProducts();
      if (res.code === 1) {
        this.products = res.data.tuiProducts;
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    },
    async onChange(val) {
      let tid = this.typeList[val].id;
      let res = await this.$api.searchByType({ tid });
      // console.log(res);
      // return false
      if (res.code === 1) {
        if (res.data === '') {
          this.tflag = false;
          this.tips = res.msg;
        } else {
          this.tflag = true;
          this.products = res.data;
        }
      } else {
        this.$notify({
          type: "warning",
          message: "获取失败",
          onClose: () => {
            return false;
          },
        });
      }
    }
  },
  components: {
    Navbar,
    Footer,
  },
};
</script>

<style>
</style>
